iT邦幫忙

2023 iThome 鐵人賽

DAY 6
1
SideProject30

一起去遛狗系列 第 6

【一起去遛狗】Day 05 Ionic + Vue

  • 分享至 

  • xImage
  •  

最後我選擇 Ionic,在看了一下兩者的官方文檔,我覺得 Ionic 好像比較好閱讀 XD。

可以想像 Ionic 是一個 UI 組件的 Framework,只是組件的樣式符合 Android 或 iOS 的規範,其實 Ionic 也只是前端熟悉的技術 (HTML、CSS、JavaScript) 來寫的。但要讓他成為手機的應用程式,並且可以在商店上架的話,就要使用 Ionic 團隊所開發的 Capacitor ,一個跨平台的應用程式執行工具,這個工具可以把由 web 組成的應用程式轉換成手機可以用的應用程式。

Get started

首先我們來安裝看看吧!首先到 ionic 的官網,點擊 Get started,會叫你登入 GitHub 或其他的 Git 工具的帳號,再來會看到可手動輸入的畫面,輸入專案的名稱,選個 icon (有狗狗欸~),選擇初始化的模板樣式,最後選擇要用的技術,就可以創建了!

Nr09tc1

會讓你選擇 git host,我就選 GitHub!

Z1VmeQ3

疑!就是這麼簡單,我回神後就開好新專案了~(撒花)
pUtcEZj

來去 GitHub 上看一下,沒錯!真的建好了!capacitor 也都裝好了 XD
OORw8zj


當然你也可以使用 Terminal 來安裝,Ionic Framework 是建立在 Node 和 npm 的環境,要確保電腦有安裝 Node.js,建議安裝 LTS 版本。

  • 安裝 Ionic CLI
    npm install -g @ionic/cli

  • 啟動 App
    ionic start

    • ? Framework: Vue
    • ? Project name: 專案名稱
    • ? Starter template:
      Fn3LusN
      list 則是列表形式
  • 運行 App
    ionic serve

步驟跑完後基本的環境就建置好拉~!比我想像中快速呢!


上一篇
【一起去遛狗】Day 04 選擇困難
下一篇
【一起去遛狗】Day 06 卸載 TypeScript 與啟動專案
系列文
一起去遛狗30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言